<template>
  <div class="add-projectContainer">
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      :rules="rules"
      label-width="112px"
      class="demo-ruleForm"
    >
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入项目名称"></el-input>
      </el-form-item>

      <el-form-item label="货币名称" prop="moneyName">
        <el-input v-model="ruleForm.moneyName" placeholder="请输入货币名称"></el-input>
      </el-form-item>

      <el-form-item label="发起人" prop="userId">
        <el-input v-model="ruleForm.userId" placeholder="请输入发起人" disabled></el-input>
      </el-form-item>

      <el-form-item label="标签"  prop="label1">
        <el-input  v-model="ruleForm.label1" placeholder="请输入标签1"></el-input>
      </el-form-item>

       <el-form-item label=""  prop="label2">
         <el-input  prop="label2" v-model="ruleForm.label2"  placeholder="请输入标签2"></el-input>
      </el-form-item>

      
     <el-form-item label=""  prop="label3">
         <el-input  prop="label3" v-model="ruleForm.label3"  placeholder="请输入标签3"></el-input>
      </el-form-item>

      <el-form-item label="项目简介" prop="intro">
        <el-input type="textarea" :rows="7" placeholder="请输入项目简介" v-model="ruleForm.intro"></el-input>
      </el-form-item>

      <el-form-item label="回报" prop="repayText">
        <el-input type="textarea" :rows="5" placeholder="请输入回报" v-model="ruleForm.repayText"></el-input>
      </el-form-item>

      <el-form-item label="预热阶段" prop="preheatStartTime">
        <el-date-picker
          v-model="ruleForm.preheatStartTime"
          type="datetime"
          placeholder="开始时间"
          style="width:100%"
        ></el-date-picker>
      </el-form-item>

        <el-form-item label="" prop="preheatEndTime">
        <el-date-picker
          v-model="ruleForm.preheatEndTime"
          type="datetime"
          placeholder="结束时间"
          style="width:100%"
        ></el-date-picker>
         </el-form-item>

      <el-form-item label="配图" prop="illustration">
        <el-upload
          list-type="picture-card"
          action="http://mov.freebd.cn:808/img/upload"
          :file-list="fileList1"
          :on-success="onSuccess1"
          :on-remove="onRemove1"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <div style="text-align:right;">
        <el-button @click="Cancel()">取 消</el-button>
        <el-button type="primary" @click.stop="isOkClick('ruleForm')">确 定</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import moment from "moment";
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        moneyName: "",
        userId: "武汉九恒影业有限公司",
        label1: "",
        label2: "",
        label3: "",
        intro: "",
        repayText: "",
        preheatStartTime: "",
        preheatEndTime: "",
        illustration: ""
      },
      fileList1: [],
      rules: {
        name: [
          { required: true, message: "请输入项目", trigger: "blur" },
          { max: 20, message: "输入内容过长", trigger: "blur" }
        ],
        moneyName: [
          { required: true, message: "请输入发行代币名称", trigger: "blur" },
          { max: 10, message: "输入内容过长", trigger: "blur" }
        ],
        label1: [
          { required: true, message: "请输入标签1", trigger: "blur" },
          {
            min: 1,
            max: 6,
            message: "标签长度在 1 到 6 个字符之间",
            trigger: "blur"
          }
        ],
              label2: [
          { required: true, message: "请输入标签2", trigger: "blur" },
          {
            min: 1,
            max: 6,
            message: "标签长度在 1 到 6 个字符之间",
            trigger: "blur"
          }
        ],
              label3: [
          { required: true, message: "请输入标签3", trigger: "blur" },
          {
            min: 1,
            max: 6,
            message: "标签长度在 1 到 6 个字符之间",
            trigger: "blur"
          }
        ],
        intro: [
          { required: true, message: "请输入项目简介", trigger: "blur" },
          { max: 500, message: "请输入500字以内简介", trigger: "blur" }
        ],
        repayText: [
          { max: 200, message: "请输入200字以内回报", trigger: "blur" }
        ],
        preheatStartTime: [
          { required: true, message: "请输入预热阶段", trigger: "blur" }
        ],
        preheatEndTime: [
          { required: true, message: "请输入预热阶段", trigger: "blur" }
        ],
        illustration: [
          { required: true, message: "请上传配图", trigger: "blur" }
        ]
      }
    };
  },
  created() {},
  methods: {
    //图片上传
    onSuccess1(Response, file, fileList) {
      this.ruleForm.illustration = file.response.data.path;
    },
    //删除
    onRemove1(file, fileList) {
      this.ruleForm.illustration = "";
      this.fileList1 = [];
    },
    //清除
    Cancel() {
      this.ruleForm = {};
      this.fileList1 = [];
      this.$router.push("/projectList");
    },
    //
    //确定
    isOkClick(formName) {
      // 转时间
      // let time = moment(
      //   this.ruleForm.preheatStartTime
      // ).format("YYYY-MM-DD HH:mm:ss");
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.ruleForm.preheatStartTime = moment(
            this.ruleForm.preheatStartTime,
            "YYYY-MM-DD HH:mm:ss"
          ).valueOf();
          this.ruleForm.preheatEndTime = moment(
            this.ruleForm.preheatEndTime,
            "YYYY-MM-DD HH:mm:ss"
          ).valueOf() || this.ruleForm.preheatStartTime;

          if(this.ruleForm.preheatStartTime > this.ruleForm.preheatEndTime){
           this.$message({
                message: "开始时间不可大于结束时间",
                type: "success"
              });
            return;
          }else{

          let url = "/projects/add";
          let params = {
            intro: this.ruleForm.intro, //项目简介 ,
            label:
              this.ruleForm.label1 +
              "," +
              this.ruleForm.label2 +
              "," +
              this.ruleForm.label3, //标签（3个）(逗号分隔) ,
            moneyName: this.ruleForm.moneyName, //发行代币名称 ,
            name: this.ruleForm.name, //项目名称 ,
            preheatStartTime: this.ruleForm.preheatStartTime, //预热 结束时间 ,
            preheatEndTime: this.ruleForm.preheatEndTime, //预热 开始时间 ,
            repayText: this.ruleForm.repayText, //回报文本 ,
            userId: 1, // 用户ID,
            illustration: this.ruleForm.illustration
          };
          this.httpPost(url, params, res => {
            if (res.code == 200) {
              const h = this.$createElement;
              this.$notify({
                title: "新增成功",
                message: h(
                  "i",
                  { style: "color: teal" },
                  "新增成功，您需要先填写详情，然后发布项目，才能开始预热阶段"
                )
              });
              setTimeout(() => {
                this.$router.push("/projectList");
                this.ruleForm = {};
              }, 1000);
            } else {
              this.$message({
                message: res.message,
                type: "warning"
              });
            }
          });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.add-projectContainer {
  width: 47%;
}
</style>